<template>
  <div class="background-img">
    <div class="flex-column  div-box " v-loading="loading"
      style="align-items: flex-start;padding: 4vh 8vw;justify-content: center;height: max-content;overflow-x: scroll;">
      <div class="flex-row" style="justify-content: space-between;width: 100%;margin-bottom: 8px;">
        <div style="padding: 8px;">
          <el-page-header @back="goBack" content="导师信息" title="返回"></el-page-header>
        </div>
        <el-button type="primary" @click="dialogFormVisible2 = true" v-if="toType == 1">发起联系</el-button>
      </div>
      <div class="padding-25" style="width: 84vw;height: max-content;background-color: white;">
        <div class="card-header flex-column flex-center">
          <h1>{{ name }}</h1>
          <h3 v-show="dbInfo.department == null">{{ university }}{{ department }}</h3>
          <h3 v-show="dbInfo.department">{{ dbInfo.university }}{{ dbInfo.department }}</h3>
          <h4 v-if="teacherInfo.info.website">个人主页：<a :href="teacherInfo.info.website" target="_blank">{{
      teacherInfo.info.website }}</a></h4>
          <h4 v-else>个人主页：<a :href="dbInfo?.website" target="_blank">{{ dbInfo.website }}</a></h4>
          <div class="flex-row" style="gap: 20px;margin-top: 8px" v-loading="hIndexLoading">
            <teacher-info-tag :showType="3" :index="teacherHindex.scholarInfoDocument.publishCnt"></teacher-info-tag>
            <teacher-info-tag :showType="4" :index="teacherHindex.scholarInfoDocument.publishCntHxk"></teacher-info-tag>
            <teacher-info-tag :showType="5" :index="teacherHindex.scholarInfoDocument.aCitedCnt"></teacher-info-tag>
            <teacher-info-tag :showType="6" :index="teacherHindex.scholarInfoDocument.avgCitedCnt"></teacher-info-tag>
            <teacher-info-tag :showType="2" :index="teacherHindex.scholarInfoDocument.hIndex"></teacher-info-tag>
          </div>
        </div>
        <div class="flex-column" style="gap: 8px;">
          <div v-if="teacherInfo.info.research || dbInfo.research" class="subTitle">研究方向</div>
          <div class="info" v-if="teacherInfo.info.research" v-html="teacherInfo.info.research"></div>
          <div class="info" v-if="dbInfo.research" v-html="dbInfo.research"></div>
          <div v-if="dbInfo.introduction || teacherInfo.info.introduction" class="subTitle">个人简介</div>
          <div class="info" v-html="teacherInfo.info.introduction"></div>
          <div class="info" v-html="dbInfo.introduction"></div>
          <div v-if="teacherInfo.info.academic || dbInfo.academic" class="subTitle">学术职位</div>
          <div class="info" v-html="teacherInfo.info.academic"></div>
          <div class="info" v-html="dbInfo.academic"></div>
          <div v-if="teacherInfo.info.thesis || dbInfo.thesis" class="subTitle">学术论文</div>
          <div class="info" v-html="teacherInfo.info.thesis"></div>
          <div class="info" v-html="dbInfo.thesis"></div>
          <div class="subTitle">最新研究成果</div>
          <div>
            <search-detail v-for="(item,index) in teacherSearch" :key="index" :indexs="index+1" :search-info="item" :type="item.type"></search-detail>
          </div>
        </div>
      </div>
      <div class="padding-25" style="width: 84vw;height: max-content;background-color: white;padding-top: 20px;">
        <div style="float: right;">
          <el-button type="primary" @click="dialogFormVisible = true">添加评论</el-button>
          <el-button type="danger" @click="shensu">申诉评论</el-button>
        </div>
        <div class="card-header flex-column flex-center" style="height: 150px;margin-top: 8px;">
          <h1>评价</h1>
          <h3>投稿时间不展示，时间为正序排列</h3>
        </div>
        <div class="card-header flex-column " style="height: max-content;margin-top:12px;"
          v-for="(item, index) in teacherReview" :key="index">
          <div class="info" style="display: inline-block">评分：<el-rate v-model="item.score" style="display:inline-block;"
              disabled show-score text-color="#ff9900" score-template="{value}">
            </el-rate></div>
          <div class="info" v-html="item.comment" style="margin-top: 8px;">
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加评价" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="评分" :label-width="formLabelWidth">
          <el-rate v-model="form.score" show-text>
          </el-rate>
        </el-form-item>
        <el-form-item label="评价" :label-width="formLabelWidth">
          <el-input v-model="form.comment" type="textarea" autocomplete="off" placeholder="
          评价：（可以从以下几个维度）
          自证认识导师：
          学术水平：
          科研经费：
          学生补助：
          师生关系：
          工作时间：
          学生前途:
"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addReview">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="发起联系" :visible.sync="dialogFormVisible2">
      <el-form :model="contactInfo">
        <el-form-item label="学生带话" :label-width="formLabelWidth">
          <el-input v-model="contactInfo.message" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="contactInfo.contactInfo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="sendInvite">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TeacherInfoTag from '@/components/teacherInfoTag.vue';
import reviewService from '@/service/reviewService';
import { Message } from 'element-ui';
import SearchService from '@/service/SearchService';
import RecommendService from '@/service/RecommendService';
import SearchDetail from '@/components/searchDetail.vue';
export default {
  name: 'TeacherDetail',
  components: {
    TeacherInfoTag,
    SearchDetail
  },
  data() {
    return {
      loading: false,
      toType: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogTableVisible2: false,
      dialogFormVisible2: false,
      form: {
        score: 0,
        comment: ""
      },
      contactInfo: {
        message: "",
        contactInfo: ""
      },
      formLabelWidth: '120px',
      teacherReview: [],
      teacherInfo: { info: { research: '正在查找中，稍等！', introduction: "正在查找中，稍等！", academic: "正在查找中，稍等！", thesis: "正在查找中，稍等！" } },
      university: "",
      name: "",
      department: "",
      teacherId: '',
      id: 0,
      requestLoading: false,
      hIndexLoading: false,
      teacherHindex: { status: '', scholarInfoDocument: { publishCnt: '0', publishCntHxk: '0', aCitedCnt: '0', avgCitedCnt: '0', hIndex: '0' } },
      teacherInterest: [],
      teacherBasic : [],
      teacherSearch : [],
      dbInfo: { supervisor: '', university: '', department: null, website: '', research: '', introduction: '', academic: '', thesis: '', researchInterests: '' }
    }
  },

  mounted() {
    this.loading = true
    this.requestLoading = true
    this.name = this.$route.params.name
    this.university = this.$route.params.university
    this.toType = this.$route.params.toType
    this.department = this.$route.params.department
    if (this.toType == 1) {
      this.id = this.$route.params.id
    }
    this.getReview()
    this.requestReview()
  },

  methods: {

    goBack() {
      this.$router.go(-1)
    },
    shensu() {
      this.$router.push("/contactUs")
    },
    async sendInvite() {
      const params = {
        student_id: sessionStorage.getItem("userId"),
        teacher_id: this.id,
        initiator: "student",
        initiator_info: this.contactInfo.contactInfo,
        initiator_message: this.contactInfo.message
      }
      try {
        const response = await RecommendService.sendInvite(params)
        if (response.code == 0) {
          Message.success("发送成功")
          this.dialogFormVisible2 = false
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async getId() {
      try {
        const response = await SearchService.getId({ name: this.name })
        if (response.code == 0) {
          let teacherInfo = JSON.parse(response.data)
          if (teacherInfo.status == 200) {
            teacherInfo.middlePageDocument.forEach(element => {
              if (element.scholarOrg == this.university) {
                this.teacherId = element.scholarId
                this.teacherBasic = element
              }
            });
            if (this.teacherId != '') {
              this.getHindex()
              this.getResearchInfo()
            } else {
              this.hIndexLoading = false
            }
          } else {
            this.hIndexLoading = false
          }
        } else {
          this.hIndexLoading = false
        }
      } catch (error) {
        // Message.error(error)
      }
    },
    async getHindex() {
      try {
        const response = await SearchService.getHindex({ id: this.teacherId })
        if (response.code == 0) {
          this.teacherHindex = JSON.parse(response.data)
          this.teacherHindex.scholarInfoDocument.aCitedCnt = String(this.teacherHindex.scholarInfoDocument.aCitedCnt)
          this.teacherHindex.scholarInfoDocument.avgCitedCnt = String(this.teacherHindex.scholarInfoDocument.avgCitedCnt)
          this.teacherHindex.scholarInfoDocument.hIndex = String(this.teacherHindex.scholarInfoDocument.hIndex)
          this.teacherHindex.scholarInfoDocument.publishCnt = String(this.teacherHindex.scholarInfoDocument.publishCnt)
          this.teacherHindex.scholarInfoDocument.publishCntHxk = String(this.teacherHindex.scholarInfoDocument.publishCntHxk)
        }
      } catch (error) {
        // Message.error(error)
      }
      this.hIndexLoading = false
    },
    async getResearchInfo(){
      const params={
        org_name: this.teacherBasic.scholarOrg,
        scholar_id: this.teacherId,
        scholar_name: this.name, 
      }
      try{
         const response = await SearchService.getResearchInfo(params)
         if (response.code == 0) {
            let info  = JSON.parse(response.data)
            if (info.status == 200) {
              this.teacherSearch = info.payoffsDocument
            }
         }
      }catch(error){
         Message.error(error)
      }
    },
    async addReview() {
      let college = this.department
      if (this.dbInfo.department) college = this.dbInfo.department
      const params = {
        username: this.name,
        college: college,
        school: this.university,
        comment: this.form.comment,
        score: this.form.score
      }
      try {
        const response = await reviewService.addComment(params)
        if (response.code == 0) {
          Message.success("添加成功")
          this.dialogFormVisible = false
          this.getReview()
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async getReview() {
      const info = {
        university: this.university,
        department: this.department,
        supervisor: this.name,
      };
      try {
        const response = await SearchService.GetReview(info)
        if (response.code == 0) {
          let info = response.data
          this.teacherReview = info[0]
          if (info[1] != null) this.dbInfo = info[1]
          this.loading = false
          this.hIndexLoading = true
          this.getId()
        }
      } catch (error) {
        Message.error(error)
      }
    },
    async requestReview() {
      const info = {
        university: this.university,
        department: this.department,
        supervisor: this.name,
      };
      try {
        const response = await SearchService.requestReview(info)
        if (response.code == 0) {
          this.teacherInfo = response.data
          this.requestLoading = false
        }
      } catch (error) {
        Message.error(error)
      }
    },
  },
};
</script>

<style scoped>
.card-header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  width: 100%;
  padding: 20px 20px;
}

.subTitle {
  font-size: 20px;
  font-weight: 600;
}

.info {
  font-size: 16px;
}

.background-img {
  background: url("../assets/icons/background.png") !important;
  background-size: cover !important;
}
</style>
